<template>
	<view>
		<tt-bar title="考勤记录" leftIcon="icon-back"></tt-bar>
		<scroll-view scroll-y="true" :style="{'height':scHeight+'px'}">
			<view class="checkWorkList">

				<view class="row" v-for="(item,index) in checkList" :key="index">
					<text class="date">{{item.group}} {{item.week}}</text>
					<view class="cwRow" v-for="(itm,idx) in item.data" :key="idx" :data-index="index"  @tap="toEdit" :data-cid="cid"  :data-idx="idx"  >
						
						<text>{{itm.time}}</text>
						<block v-for="(it,ix) in itm.data" :key="ix">
							<text v-if="it.status==1">签到 {{it.count}}</text>
							<text v-if="it.status==2">请假 {{it.count}}</text>
							<text v-if="it.status==3">缺勤 {{it.count}}</text>
							<text v-if="it.status==4 || it.status==0">补课 {{it.count}}</text>
						</block>
						
						<text class="iconfont icon-right"></text>
					</view>

				</view>

			</view>
			<empty-box v-if="checkList.length<1"></empty-box>
		</scroll-view>
		<view class="btmBox">
			<button data-url="makeWork" :data-cid="cid" :data-cname="cname" :data-gname="gname" :data-sroom="sroom" @tap="toPage" :data-tname="tname"  data-buke="1">
				<image src="../../static/icon-kq1.png" mode="widthFix"></image>
				<text>补课签到</text>
			</button>
			<button data-url="checkWorkDetail" :data-cid="cid" :data-cname="cname" :data-gname="gname" :data-sroom="sroom" :data-tname="tname" @tap="toPage">
				<image src="../../static/icon-kq2.png" mode="widthFix"></image>
				<text>考勤签到</text>
			</button>
		</view>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import emptyBox from "@/components/emptyBox/emptyBox.vue";
	import API from "@/common/api.js";
	import TL from '@/common/tool.js';
	export default {
		components: {
			ttBar,
			emptyBox
		},
		data() {
			return {
				scHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(190),
				checkList: [{
					data: [],
					week: '星期'
				}],
				cid: '',
				cname: '',
				gname:'',
				sroom:'',
				tname:''
			};
		},
		methods: {
			kaoqin(){
				
			},
			toEdit(e){
				let _index=parseInt(e.currentTarget.dataset.index);
				let _idx=parseInt(e.currentTarget.dataset.idx);
				console.log(_index);
				console.log(_idx);
				let _data={
					classId:this.cid,
					className:this.cname,
					goodName:this.gname,
					classRoom:this.sroom,
					teacherName:this.tname,
					week:this.checkList[_index].week
				}
				uni.setStorageSync("classInfo",_data)
				this.toPage({
					url:'editWork',
					btid:this.checkList[_index].data[_idx].group
				})
			},
			getData() {
				let _this=this;
				API.getClassCheckListById(this.cid).then(res => {
					let _data = [];
					_data =TL.groupArr(res.data.data,'batch_id');
					_data.forEach((item, val) => {
						item.date = item.group.substr(2, 4) + '-' + item.group.substr(6, 2) + '-' + item.group.substr(8, 2);
						item.time = item.group.substr(10, 2) + ':' + item.group.substr(12, 2) + ':' + item.group.substr(14, 2);
					})
					_data =TL.groupArr(_data,'date');
					_data.forEach((x) => {
						x['week'] =  TL.datePattern(TL.strToDate(x.group),'EE');
					})
					this.checkList = _data;
				})
				
			},

			getWeek(_str){
				let _date=new Date(_str);
				return _date.pattern("yyyy-MM-dd EEE");
			},
			fenzu(key, _arr) {
				var map = {}, //分组索引对象，
					dest = [], //输出结果
					i = 0,
					l = _arr.length,
					n = 0;

				for (i; i < l; i++) { //遍历原生数据
					var ai = _arr[i];
					if (!map[ai[key]]) { //如果
						map[ai[key]] = ai[key]; //添加索引
						dest.push({ //添加分组标识和数据
							group: ai[key],
							data: [ai]
						})
					} else {
						for (n; n < dest.length; n++) { //遍历输出结果
							var dj = dest[n];
							if (dj.group == ai[key]) {
								dj.data.push(ai); //追加数据
								break;
							}
						}
					}
				}
				return dest;
			}

		},
		onLoad(cfm) {
			if(uni.getStorageSync("classInfo")){
				let _cfm=uni.getStorageSync("classInfo");
				this.cid = _cfm.classId
				this.cname = _cfm.className;
				this.gname=_cfm.goodName;
				this.sroom=_cfm.classRoom;
				this.tname=_cfm.teacherName;
				this.getData();
			}
			
			uni.$on("upList", () => {
				this.getData()
			})
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.checkWorkList {
		padding: 30upx 20upx;
		display: flex;
		flex-direction: column;

		.row {
			padding: 24upx 20upx;
			background-color: #FFFFFF;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			margin-bottom: 28upx;

			.date {
				font-size: 32rpx;
				color: #8c8c8c;

			}

			.cwRow {
				display: flex;
				align-items: baseline;
				margin-top: 20upx;

				text {
					font-size: 28rpx;
					color: #202932;
					margin-right: 40upx;
				}

				.iconfont {
					flex: 1;
					margin-right: 20upx;
					text-align: right;
				}
			}
		}
	}

	.btmBox {
		width: 100%;
		height: 100upx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;

		button {
			width: 40%;
			height: 70upx;
			line-height: 66upx;
			border: 2upx solid #CCCCCC;
			font-size: 32upx;
			border-radius: 35upx;
			padding: 0 40upx;
			display: flex;
			align-items: center;
			image{
				width: 46upx;
				margin-right: 20upx;
			}
		}

		button:first-child {
			background-color: #9cace1;
			color: #FFFFFF;
			border-color: #9cace1;
		}

		button:last-child {
			background-color: #ffcd11;
			color: #FFFFFF;
			border-color: #ffcd11;
		}

		button:after {
			border: none;
			outline: none;
		}
	}
</style>
